<!-- 会计科目->记账凭证->批量审核 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="()=>{showModel = 'list'}" v-show="showModel=='order'">
                                <a-icon class="btns-icon" type="unordered-list" />
                                <div class="btns-text">列表</div>
                            </div>
                            <div class="btns" @click="()=>{showModel = 'order'}" v-show="showModel=='list'">
                                <a-icon class="btns-icon" type="container" />
                                <div class="btns-text">凭证</div>
                            </div>
                        </a-col>

                        <a-col :class="showModel == 'list'?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl" v-if="permissions.includes('voucherExa:examine')">
                            <div class="btns" @click="showModel == 'list'?auditClick(1):''">
                                <a-icon class="btns-icon" type="audit" />
                                <div class="btns-text">审核</div>
                            </div>
                        </a-col>
                        <a-col :class="showModel == 'list'?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl" v-if="permissions.includes('voucherExa:noExamine')">
                            <div class="btns" @click="showModel == 'list'?auditClick(0):''">
                                <a-icon class="btns-icon" type="audit" />
                                <div class="btns-text">弃审</div>
                            </div>
                        </a-col>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">

                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div :class="showModel=='order'?'':'btns-disable'">
                                <div class="btns" @click="showModel=='order'?getDataNewPage(3):''">
                                    <a-icon class="btns-icon" type="vertical-right" />
                                    <div class="btns-text">首张</div>
                                </div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div :class="showModel=='order'?'':'btns-disable'">
                                <div class="btns" @click="showModel=='order'?getDataNewPage(1):''">
                                    <a-icon class="btns-icon" type="left" />
                                    <div class="btns-text">上张</div>
                                </div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div :class="showModel=='order'?'':'btns-disable'">
                                <div class="btns" @click="showModel=='order'?getDataNewPage(2):''">
                                    <a-icon class="btns-icon" type="right" />
                                    <div class="btns-text">下张</div>
                                </div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div style="position:relative" :class="showModel=='order'?'':'btns-disable'">
                                <div class="btns" @click="showModel=='order'?getDataNewPage(4):''">
                                    <a-icon class="btns-icon" type="vertical-left" />
                                    <div class="btns-text">末张</div>
                                </div>
                                <div style="position:absolute;width:2px;height:36px;border-radius:6px;background:#ccc;top:0px;right:0px;"></div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div style="position:relative">
                                <div class="btns" @click="syncFun">
                                    <a-icon class="btns-icon" type="file-sync" />
                                    <div class="btns-text">刷新</div>
                                </div>
                                <div style="position:absolute;width:2px;height:36px;border-radius:6px;background:#ccc;top:0px;right:0px;"></div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="printOrder">
                                <a-icon class="btns-icon" type="printer" />
                                <div class="btns-text">打印</div>
                            </div>
                        </a-col>

                    </a-col>
                </a-row>
            </div>
            <div ref="print" class="credentials-wrapper">
                <h3 class="text-center">
                    <span class="text-name">凭证审核</span><br>
                </h3>
                <section v-show="showModel=='list'">
                    <section class="credentials-search-warpper">
                        <div class="search-box">
                            <div class="filter">
                                <div class="filter-label">凭证编号:</div>
                                <div class="filter-control">
                                    <a-input id="code" v-model="searchData.code" autocomplete="off" placeholder="请输入凭证编号" />
                                </div>
                            </div>
                            <div class="filter">
                                <div class="filter-label">审核人:</div>
                                <div class="filter-control">
                                    <a-input @click="searchGroup('employees')" v-model="searchData.reviewerUserName" autocomplete="off" placeholder="请选择审核人" />
                                    <searchGroupHeader ref="reviewerRef" :inputValue="searchData.reviewerUserName" :componentName="'employees'" @clickItem="searchBackData"></searchGroupHeader>
                                </div>
                            </div>
                            <div class="filter">
                                <div class="filter-label">审核日期:</div>
                                <div class="filter-control">
                                    <a-date-picker v-model="searchData.reviewerDate" :format="'YYYY-MM-DD'" placeholder="请选择审核日期" @change="(e,v) => {searchData.reviewerDate=v;}" />
                                </div>
                            </div>
                            <div class="filter">
                                <div class="filter-label">状态:</div>
                                <div class="filter-control">
                                    <a-select v-model="searchData.status">
                                        <a-select-option :value="null">
                                            全部
                                        </a-select-option>
                                        <a-select-option :value="1">
                                            已审
                                        </a-select-option>
                                        <a-select-option :value="0">
                                            未审
                                        </a-select-option>
                                        <a-select-option :value="3">
                                            已记账
                                        </a-select-option>
                                    </a-select>
                                </div>
                            </div>
                            <div class="filter">
                                <div class="filter-label">是否废除:</div>
                                <div class="filter-control">
                                    <a-select v-model="searchData.isDelete">
                                        <a-select-option :value="null">
                                            全部
                                        </a-select-option>
                                        <a-select-option :value="1">
                                            是
                                        </a-select-option>
                                        <a-select-option :value="0">
                                            否
                                        </a-select-option>
                                    </a-select>
                                </div>
                            </div>
                            <div class="filter">
                                <div class="filter-label">制单日期:</div>
                                <div class="filter-control">
                                    <a-date-picker v-model="searchData.createDate" :format="'YYYY-MM-DD'" placeholder="请选择制单日期" @change="(e,v) => {searchData.createDate=v;}" />
                                </div>
                            </div>
                            <div class="filter">
                                <div class="filter-label">业务日期:</div>
                                <div class="filter-control">
                                    <a-date-picker v-model="searchData.businessDate" :format="'YYYY-MM-DD'" placeholder="请选择制单日期" @change="(e,v) => {searchData.businessDate=v;}" />
                                </div>
                            </div>
                        </div>
                        <div style="position:absolute;right:0;top:0">
                            <a-button style="float:right" type="primary" @click="getDataList('search')" enter-button>
                                搜索
                            </a-button>
                        </div>
                    </section>
                    <div class="margin-top-10">
                        <a-table :columns="listColumns" :customRow="customClickList" :data-source="listDataSource" :row-selection="rowSelection" :pagination="pagination" :scroll="{x:500,y:500}" bordered>

                        </a-table>
                    </div>
                </section>
                <section style="position:relative" v-show="showModel=='order'">
                    <div v-if="voucherState==1&&invalidState==1"><span class="audit-status" style="right:180px;">废除已审</span></div>
                    <div v-else-if="voucherState==3"><span class="audit-status" style="right:180px;">已记账</span></div>
                    <div v-else-if="voucherState==1"><span class="audit-status" style="right:180px;">已审</span></div>
                    <div v-else-if="invalidState==1"><span class="audit-status" style="right:180px;">废除</span></div>
                    <a-row>
                        <a-col :span="24">
                            <div class="date-tp">
                                <a-form-model :layout="formLayout">
                                    <div class="header-box" style="position:relative">
                                        <!-- 遮罩（点击修改关闭遮罩） -->
                                        <div class="edit-mask-route" v-show="editMask"></div>
                                        <div class="bills-box-header">
                                            <div class="filter">
                                                <div class="filter-label">凭证编号:</div>
                                                <div class="filter-control">
                                                    <a-input read-only @click="searchGroup('credentialsSearch')" v-model="dataJson.code" autocomplete="off" placeholder="请输入凭证编号" />
                                                    <searchGroupHeader ref="credentialsSearch" :inputValue="dataJson.code" :componentName="'category'" @clickItem="searchBackData"></searchGroupHeader>
                                                </div>
                                            </div>
                                            <div class="filter">
                                                <div class="filter-label">业务日期:</div>
                                                <div class="filter-control">
                                                    <a-date-picker v-model="dataJson.businessDate" format="YYYY-MM-DD" @change="onChangeBusinessDate" placeholder="请选择业务日期" />
                                                </div>
                                            </div>
                                            <div class="filter">
                                                <div class="filter-label">附单据数:</div>
                                                <div class="filter-control">
                                                    <a-input v-model="dataJson.attachedData"></a-input>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a-form-model>
                            </div>
                            <div class="table-box">
                                <a-table class="atable-edit" :columns="columns" :customRow="customClick" :data-source="dataSource" :pagination="false" bordered>
                                    <div v-for="item in editColumnArraya" :key="item" :slot="item" slot-scope="text, record ,index">
                                        <editable-cell v-if="isRouterAlive" :record="record" :col="item" :text="text" @showModalAuxiliary="showModalAuxiliary" @change="onCellChange(index, item, $event)" />
                                    </div>
                                </a-table>
                                <div class="total-box">
                                    <div class="total-title">
                                        合计
                                    </div>
                                    <div v-if="totalDebitAmount>0" style="text-align:right;padding-right:2px;" class="total-borrow">
                                        {{totalDebitAmount | NumFormat}}
                                    </div>
                                    <div v-else style="text-align:right;padding-right:2px;color:red" class="total-borrow">
                                        {{totalDebitAmount | NumFormat}}
                                    </div>
                                    <div v-if="totalCreditAmount>0" style="text-align:right;padding-right:2px;" class="total-loan">
                                        {{totalCreditAmount | NumFormat}}
                                    </div>
                                    <div v-else style="text-align:right;padding-right:2px;color:red" class="total-loan">
                                        {{totalCreditAmount | NumFormat}}
                                    </div>
                                </div>
                                <div class="footer-tp">
                                    <a-row :gutter="[8,16]">
                                        <a-col :span="5">记账：{{dataJson.bookkeeperName}}</a-col>
                                        <a-col :span="5">记账日期：{{dataJson.bookDate}}</a-col>
                                        <a-col :span="5">审核：{{dataJson.reviewerUserName}}</a-col>
                                        <a-col :span="5">审核日期:{{dataJson.reviewerDate}}</a-col>
                                        <!-- <a-col :span="4">出纳：</a-col> -->
                                        <a-col :span="4">制单：{{dataJson.createUserName}}</a-col>
                                    </a-row>
                                </div>
                            </div>
                        </a-col>
                    </a-row>

                    <div class="edit-mask" style="width:100%;height:100%;" v-show="editMask">
                        <!-- 遮罩（点击修改关闭遮罩） -->
                    </div>
                </section>

            </div>
            <div class="contextmenu-box">
                <!-- 右键菜单 -->
                <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
                    <li @click="handleAdd()">新增行</li>
                    <li @click="handleDelete()">删除行</li>
                    <!--<li @click="handleCopy()">复制行</li> -->
                </ul>
            </div>
        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <div v-html="stylePrint"></div>

        <!-- 辅助信息弹窗 -->
        <drag-modal title="辅助项" :visible="auxiliaryModal" @cancel="cancel" @ok="ok" :width="800" :destroyOnClose="true">
            <div class="auxiliary-wapper">
                <div class="font-size-14" v-if="isBank">现金银行
                    <a-row class="condition" :gutter="[8,0]">
                        <a-col :span="12">
                            <div class="filter">
                                <label class="filter-label"><span style="color:red">*</span> 结算方式 :</label>
                                <div class="filter-control">
                                    <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;top:10px;left:0;" @click="handleSearch('settle')"></div>
                                    <a-input-search placeholder="请选择结算方式" v-model="settleName" size="small" @search="handleSearch('settle')" />

                                    <form-search-group ref="settle" :dynamicData="{code:'settleName',name:'结算方式',val:'clearmethod',value:settleName}" @clickItem="setValue"></form-search-group>
                                </div>
                            </div>
                        </a-col>
                        <a-col :span="12">
                            <div class="filter">
                                <label class="filter-label"><span style="color:red">*</span> 票号:</label>
                                <div class="filter-control">
                                    <a-input v-model="billNo" size="small"></a-input>
                                </div>
                            </div>
                        </a-col>
                        <a-col :span="12">
                            <div class="filter">
                                <label class="filter-label"><span style="color:red">*</span> 票据日期:</label>
                                <div class="filter-control">
                                    <a-date-picker v-model="billDate" @change="onChangeDateDay" />
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                    <hr />
                </div>
                <div class="font-size-14" v-if="isAuxaccDepartment">部门
                    <a-row class="condition" :gutter="[8,0]">
                        <a-col :span="12">
                            <div class="filter">
                                <label class="filter-label"><span style="color:red">*</span> 部门:</label>
                                <div class="filter-control">
                                    <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;top:10px;left:0;" @click="handleSearch('office')"></div>
                                    <a-input-search placeholder="请选择部门" v-model="officeName" size="small" @search="handleSearch('office')" />

                                    <form-search-group ref="office" :dynamicData="{code:'officeName',name:'部门',val:'office',value:officeName}" @clickItem="setValue"></form-search-group>
                                </div>
                            </div>

                        </a-col>
                    </a-row>
                    <hr />
                </div>
                <div class="font-size-14" v-if="isAuxaccPerson">个人往来
                    <a-row class="condition" :gutter="[8,0]">
                        <a-col :span="12">
                            <div class="filter">
                                <label class="filter-label"><span style="color:red">*</span> 个人:</label>
                                <div class="filter-control">
                                    <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;top:10px;left:0;" @click="handleSearch('employees')"></div>
                                    <a-input-search placeholder="请选择个人" v-model="userName" size="small" @search="handleSearch('employees')" />

                                    <form-search-group ref="employees" :dynamicData="{code:'userName',name:'个人',val:'employees',value:userName}" @clickItem="setValue"></form-search-group>
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                    <hr />
                </div>
                <div class="font-size-14" v-if="isAuxaccCustomer">客户往来
                    <a-row class="condition" :gutter="[8,0]">
                        <a-col :span="12">
                            <div class="filter">
                                <label class="filter-label"><span style="color:red">*</span> 客户:</label>
                                <div class="filter-control">
                                    <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;top:10px;left:0;" @click="handleSearch('crm')"></div>
                                    <a-input-search placeholder="请选择客户" v-model="crmName" size="small" @search="handleSearch('crm')" />

                                    <form-search-group ref="crm" :dynamicData="{code:'crmName',name:'客户',val:'crm',value:crmName}" @clickItem="setValue"></form-search-group>
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                    <hr />
                </div>
                <div class="font-size-14" v-if="isAuxaccSupplier">供应商往来
                    <a-row class="condition" :gutter="[8,0]">
                        <a-col :span="12">
                            <div class="filter">
                                <label class="filter-label"><span style="color:red">*</span> 供应商:</label>
                                <div class="filter-control">
                                    <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;top:10px;left:0;" @click="handleSearch('supplie')"></div>
                                    <a-input-search placeholder="请选择供应商" v-model="vendorName" size="small" @search="handleSearch('supplie')" />

                                    <form-search-group ref="supplie" :dynamicData="{code:'vendorName',name:'供应商',val:'supplie',value:vendorName}" @clickItem="setValue"></form-search-group>
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                    <hr />
                </div>
                <div class="font-size-14" v-if="isAuxaccProject">项目
                    <a-row class="condition" :gutter="[8,0]">
                        <a-col :span="12">
                            <div class="filter">
                                <label class="filter-label"><span style="color:red">*</span> 项目:</label>
                                <div class="filter-control">
                                    <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;top:10px;left:0;" @click="handleSearch('project')"></div>
                                    <a-input-search placeholder="请选择项目" v-model="projectName" size="small" @search="handleSearch('project')" />

                                    <form-search-group ref="project" :dynamicData="{code:'projectName',name:'客户',val:'project',value:projectName}" @clickItem="setValue"></form-search-group>
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                    <hr />
                </div>
            </div>

            <template slot="footer">
                <div>
                    <a-button type="primary" @click="ok">确认</a-button>
                    <a-button @click="cancel" class="margin-left-10">关闭</a-button>
                </div>
            </template>
        </drag-modal>
    </div>
</template>
<script>

const dataSource = [];
for (let i = 0; i < 10; i++) {
    let array = {}
    dataSource.push(array);
}
import editableCell from "./editTable/EditableCell";
import { mapState } from "vuex";
import { save, examine, remove, getList, getPage, getCode, book } from '@/api/finance/credentials';

import searchGroupHeader from "@/components/PopUpLayer/searchGroupHeader";
import FormSearchGroup from '@/components/Form/FormSearchGroup';
import moment from "moment";

export default {
    components: {
        editableCell,
        searchGroupHeader,
        FormSearchGroup,
    },
    data () {
        return {
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            formLayout: "inline",
            labelCol: { span: 10 },
            wrapperCol: { span: 14 },
            grid: {
                xs: 24,
                sm: 24,
                md: 12,
                lg: 8,
                xl: 8,
                xxl: 8
            },
            editMask: true,
            //----------↑样式----------

            pagination: {
                current: 1,
                pageSize: 20,
                total: 0,
                size: 'small',
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input style="height:22px !important;width:3.2rem;"
                                value={this.pagination.pageSize}
                                min={1}
                                max={20}
                                size="small"
                                step={1}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                onChange: (page, pageSize) => {
                    this.pagination.current = page;
                    this.getDataList();
                }
            },
            customClick: (record, index) => ({
                on: {
                    contextmenu: (e) => {//右键事件
                        e.preventDefault();
                        this.openMenu(e);
                        console.log('右键点击的', index);
                        this.thisClickId = index;
                    },
                    click: () => {
                        this.currentIndexTable = index;
                        console.log('当前点击的行下标', this.currentIndexTable)
                    }
                },
            }),
            customClickList: (record, index) => ({
                on: {
                    dblclick: () => {
                        this.showModel = 'order';
                        this.currentId = record.id;
                        this.getDataNewPage(5);
                    }
                }
            }),
            searchData: {
                code: null,
                status: null,
                isDelete: null,
                bookDate: null,
                bookkeeperName: null,
                bookkeeperId: null,
                reviewerUserName: null,
                reviewerUserId: null,
                reviewerDate: null,
                businessDate: null,
                createDate: null,
            },
            thisClickId: null,
            showModel: 'list',//list:列表，order:单据
            listColumns: [{
                title: '凭证编号',
                dataIndex: 'code'
            }, {
                title: '类别',
                dataIndex: 'vclassName'
            }, {
                title: '审核人',
                dataIndex: 'reviewerUserName'
            }, {
                title: '审核日期',
                dataIndex: 'reviewerDate'
            }, {
                title: '记账人',
                dataIndex: 'bookkeeperName'
            }, {
                title: '记账日期',
                dataIndex: 'bookDate'
            }, {
                title: '状态',
                dataIndex: 'status',
                customRender: (text, record, index) => {
                    return text == 0 ? '未审核' : text == 1 ? '已审核' : text == 3 ? '已记账' : '';
                }
            }, {
                title: '是否废除',
                dataIndex: 'isDelete',
                customRender: (text, record, index) => {
                    return text == 1 ? <span style="color:red">是</span> : '否';
                }
            }, {
                title: '制单日期',
                dataIndex: 'businessDate'
            }, {
                title: '附单据数',
                dataIndex: 'attachedData'
            }],
            columns: [{
                title: '摘要',
                dataIndex: 'remark',
                width: 150,
                scopedSlots: { customRender: 'remark' },
                ellipsis: true,
            }, {
                title: '科目名称',
                dataIndex: 'accountingName',
                width: 150,
                scopedSlots: { customRender: 'accountingName' },
                ellipsis: true,
            }, {
                title: '辅助项',
                dataIndex: 'auxiliaryItem',
                width: 200,
                scopedSlots: { customRender: 'auxiliaryItem' },
                ellipsis: true,
            }, {
                title: <div class="money-table-title">
                    <div>借方金额</div>
                    <div class="header-box">
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">亿</div>
                        <div class="header-item">千</div>
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">万</div>
                        <div class="header-item">千</div>
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">元</div>
                        <div class="header-item">角</div>
                        <div class="header-item">分</div>
                    </div>
                </div>,
                dataIndex: 'debitAmount',
                width: 100,
                scopedSlots: { customRender: 'debitAmount' },
                ellipsis: true,
            }, {
                title: <div class="money-table-title">
                    <div>贷方金额</div>
                    <div class="header-box">
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">亿</div>
                        <div class="header-item">千</div>
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">万</div>
                        <div class="header-item">千</div>
                        <div class="header-item">百</div>
                        <div class="header-item">十</div>
                        <div class="header-item">元</div>
                        <div class="header-item">角</div>
                        <div class="header-item">分</div>
                    </div>
                </div>,
                dataIndex: 'creditAmount',
                width: 100,
                scopedSlots: { customRender: 'creditAmount' },
                ellipsis: true,
            }],
            dataSource: dataSource,
            visible: false,
            top: 0,
            left: 0,
            editColumnArraya: [],
            isRouterAlive: true,
            dataJson: {
                code: null,
                classWord: null,//凭证字
                vclassName: null,
                vclassId: null,
                businessDate: moment().format('YYYY-MM-DD'),
                attachedData: null,
                contractNo: null,
                accountingVoucherDetails: [],
            },
            auxiliaryModal: false,//辅助计量弹窗是否显示
            voucherState: 0,    //审核状态
            invalidState: 0,    //作废状态
            voucherCode: 0,     //凭证编码  

            settleName: null,   //结算方式
            settleId: null,     //结算方式id
            officeName: null,
            officeId: null,
            userName: null,
            userId: null,
            crmName: null,
            crmId: null,
            vendorName: null,
            vendorId: null,
            projectName: null,
            projectId: null,
            billDate: null,     //票据日期
            billNo: null,       //票据号

            isBank: false,   //是否现金，银行，等价物
            isAuxaccCustomer: false,    //是否客户核算
            isAuxaccDepartment: false,  //是否部门核算
            isAuxaccPerson: false,      //是否个人核算
            isAuxaccProject: false,     //是否项目核算
            isAuxaccSupplier: false,    //是否供应商核算

            currentIndexTable: null,     //当前点击的行下标

            totalDebitAmount: null,  //借方金额合计
            totalCreditAmount: null,      //贷方金额合计

            currentId: null,     //当前凭证id
            selectedKeys: [],
            selectedRows: [],
        };
    },
    created () {
        this.editColumnArray(this.columns);
        this.getDataList();
        this.getDataNewPage(4);//获取最新一条凭证

    },
    computed: {
        rowSelection () {
            return {
                columnWidth: 40,
                selectedRowKeys: this.selectedKeys,
                onChange: this.onSelectChange
            }
        },
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    watch: {
        visible (value) {
            if (value) {
                document.body.addEventListener("click", this.closeMenu);
            } else {
                document.body.removeEventListener("click", this.closeMenu);
            }
        },
        voucherCode (value) {
            console.log(value);
            if (this.dataJson.classWord) {
                this.$set(this.dataJson, 'code', this.dataJson.classWord + '字第' + value + '号');
            }
        },
        dataSource: {
            handler (data) {
                let a = 0;
                let b = 0;
                data.forEach(element => {
                    if (element.debitAmount) {
                        a += Number(element.debitAmount);
                    }
                    if (element.creditAmount) {
                        b += Number(element.creditAmount);
                    }
                });
                this.totalDebitAmount = a.toFixed(2);
                this.totalCreditAmount = b.toFixed(2);
            },
            deep: true,
        }
    },
    methods: {
        moment,
        reload () {
            //强制刷新表格
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            });
        },
        printOrder () {
            //打印
            this.$print(this.$refs.print);
        },
        newPage () {
            this.showModel = 'list';
            this.editMask = false;
            this.voucherState = 0;
            this.invalidState = 0;
            this.dataJson = {
                vclassName: null,
                vclassId: null,
                businessDate: moment().format('YYYY-MM-DD'),
                accountingVoucherDetails: [],
            };

            this.dataSource = [];
            for (let i = 0; i < 10; i++) {
                let array = {}
                this.dataSource.push(array);
            }
            this.reload();
            this.clearTipsData();
            this.getCode();
        },
        async getCode () {
            //获取编码
            await getCode({ businessDate: this.dataJson.businessDate }).then(res => {
                if (res.code === 200) {
                    this.voucherCode = res.message;
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        onChangeBusinessDate (e, v) {
            //业务时间改变
            this.dataJson.businessDate = v;
            this.getCode();
        },
        openMenu (e) {
            //显示右键菜单
            var x = e.pageX - 250;
            var y = e.pageY - 40;
            this.top = y;
            this.left = x;
            this.visible = true;
        },
        closeMenu () {
            //隐藏右键菜单
            this.visible = false;
        },
        onCellChange (indexTable, dataIndex, value) {

            //当前点击的行下标
            this.currentIndexTable = indexTable;
            console.log('当前点击的行下标：', this.currentIndexTable);

            const dataSource = [...this.dataSource];
            const target = dataSource.find((item, index) => index === indexTable);
            if (dataIndex == 'accountingName') {
                if (value) {
                    target['accountingName'] = value.treeNames.split('/').join('-');
                    target['accountingId'] = value.id;
                    target['accountingCode'] = value.code;


                    value.isAuxaccCustomer ? target['crmId'] = 0 : target['crmId'] = null;//客户
                    value.isAuxaccDepartment ? target['officeId'] = 0 : target['officeId'] = null;//部门
                    value.isAuxaccPerson ? target['userId'] = 0 : target['userId'] = null;//个人
                    value.isAuxaccProject ? target['projectId'] = 0 : target['projectId'] = null;//项目
                    value.isAuxaccSupplier ? target['vendorId'] = 0 : target['vendorId'] = null;//供应商
                    value.isBank || value.isCash || value.isCashEquivalents ? target['settleId'] = 0 : target['settleId'] = null;//现金银行

                    if (value.isAuxaccCustomer || value.isAuxaccDepartment || value.isAuxaccPerson || value.isAuxaccProject || value.isAuxaccSupplier || value.isBank || value.isCash || value.isCashEquivalents) {
                        this.clearTipsData();

                        this.isBank = (value.isBank || value.isCash || value.isCashEquivalents) ? true : false;
                        this.isAuxaccCustomer = value.isAuxaccCustomer;
                        this.isAuxaccDepartment = value.isAuxaccDepartment;
                        this.isAuxaccPerson = value.isAuxaccPerson;
                        this.isAuxaccProject = value.isAuxaccProject;
                        this.isAuxaccSupplier = value.isAuxaccSupplier;

                        this.auxiliaryModal = true;//显示弹窗
                    }
                    // isBank 是否银行
                    // isCash 是否现金可
                    // isCashEquivalents 是否现金及现金等价物科目
                    // isAuxaccCustomer 是否客户核算
                    // isAuxaccDepartment 是否部门核算
                    // isAuxaccPerson 是否个人核算
                    // isAuxaccProject 是否项目核算
                    // isAuxaccSupplier 是否供应商核算
                } else {
                    target['accountingName'] = null;
                    target['accountingId'] = null;
                }


            } else if (dataIndex == 'debitAmount') {
                //借方金额
                // let reg = /^[0-9][0-9]*(\.[0-9]{1,2})?$/;
                // if(!reg.test(value)){
                //     alert(1)
                //     target[dataIndex] = null;
                //     return
                // }

                target[dataIndex] = value;
                if (value) {
                    target['creditAmount'] = null;
                }
            } else if (dataIndex == 'creditAmount') {
                //贷方金额

                // let reg = /^[0-9][0-9]*(\.[0-9]{1,2})?$/;
                // if(!reg.test(value)){
                //     alert(2)
                //     target[dataIndex] = null;
                //     return
                // }

                target[dataIndex] = value;
                if (value) {
                    target['debitAmount'] = null;
                }
            } else {
                target[dataIndex] = value;
            }

            this.$nextTick(() => {
                this.dataSource = dataSource;
                this.reload();
            })


        },
        showModalAuxiliary () {
            this.dataSource.forEach((item, index) => {

                if (index == this.currentIndexTable) {
                    this.isAuxaccCustomer = item.crmId || item.crmId == 0 ? true : false;      //客户往来
                    this.isAuxaccDepartment = item.officeId || item.officeId == 0 ? true : false;  //部门
                    this.isAuxaccPerson = item.userId || item.userId == 0 ? true : false;          //个人往来
                    this.isAuxaccProject = item.projectId || item.projectId == 0 ? true : false;        //项目
                    this.isAuxaccSupplier = item.vendorId || item.vendorId == 0 ? true : false;      //供应商往来
                    this.isBank = item.settleId || item.settleId == 0 ? true : false;//现金银行

                    console.log(this.isBank, this.isAuxaccCustomer, this.isAuxaccDepartment, this.isAuxaccPerson, this.isAuxaccProject, this.isAuxaccSupplier)

                    if (this.isBank || this.isAuxaccCustomer || this.isAuxaccDepartment || this.isAuxaccPerson || this.isAuxaccProject || this.isAuxaccSupplier) {
                        this.auxiliaryModal = true;
                    }

                    this.settleName = item.settleName;
                    this.settleId = item.settleId;
                    this.officeName = item.officeName;
                    this.officeId = item.officeId;
                    this.userName = item.userName;
                    this.userId = item.userId;
                    this.crmName = item.crmName;
                    this.crmId = item.crmId;
                    this.vendorName = item.vendorName;
                    this.vendorId = item.vendorId;
                    this.projectName = item.projectName;
                    this.projectId = item.projectId;
                    this.billDate = item.billDate;
                    this.billNo = item.billNo;
                }
            });
        },
        clearTipsData () {
            //清空数据
            this.currentId = null;

            this.settleName = null;
            this.settleId = null;
            this.officeName = null;
            this.officeId = null;
            this.userName = null;
            this.userId = null;
            this.crmName = null;
            this.crmId = null;
            this.projectName = null;
            this.projectId = null;
            this.billDate = null;
            this.billNo = null;
        },
        ok () {
            this.dataSource.forEach((item, index) => {
                if (index == this.currentIndexTable) {
                    //判断弹窗必填
                    if (this.isBank) {//现金银行
                        if (!this.settleId || !this.billDate || !this.billNo) {
                            this.$message.warning('现金银行信息必须填写完整');
                            return;
                        }
                    }
                    if (this.isAuxaccDepartment) {//部门
                        if (!this.officeId) {
                            this.$message.warning('部门必须选择');
                            return;
                        }
                    }
                    if (this.isAuxaccCustomer) {//客户往来
                        if (!this.crmId) {
                            this.$message.warning('客户必须选择');
                            return;
                        }
                    }
                    if (this.isAuxaccPerson) {//个人
                        if (!this.userId) {
                            this.$message.warning('个人必须选择');
                            return;
                        }
                    }
                    if (this.isAuxaccSupplier) {//供应商往来
                        if (!this.vendorId) {
                            this.$message.warning('项目必须选择');
                            return;
                        }
                    }
                    if (this.isAuxaccProject) {//项目
                        if (!this.projectId) {
                            this.$message.warning('项目必须选择');
                            return;
                        }
                    }

                    item.settleName = this.settleName;
                    item.settleId = this.settleId;
                    item.billDate = this.billDate;
                    item.billNo = this.billNo;
                    item.officeName = this.officeName;
                    item.officeId = this.officeId;
                    item.userName = this.userName;
                    item.userId = this.userId;
                    item.crmName = this.crmName;
                    item.crmId = this.crmId;
                    item.vendorName = this.vendorName;
                    item.vendorId = this.vendorId;
                    item.projectName = this.projectName;
                    item.projectId = this.projectId;


                    let array = [this.settleName, this.billDate, this.billNo, this.officeName, this.userName, this.crmName, this.projectName, this.vendorName]
                    let b = array.filter(r => {
                        return r && r.trim();
                    })
                    console.log('辅助项：', b)
                    item.auxiliaryItem = b.join('/');

                    this.reload();
                    this.auxiliaryModal = false;
                }
            });

        },
        onChangeDateDay (v, s) {
            this.billDate = s;
        },
        handleAdd () {
            //新增数据
            const { count, dataSource } = this;
            const newData = {};
            this.$nextTick(() => {
                this.dataSource.splice(this.dataSource.length, 0, newData);
            })
            console.log('新增行：', this.dataSource)
        },
        handleDelete () {
            //删除整行
            let _this = this;
            let numberId = this.thisClickId;
            console.log(numberId);
            this.$confirm({
                title: "确认",
                content: (
                    <span>
                        您确定要{<span style="color:red;">删除</span>}该记录吗？
                    </span>
                ),
                onOk () {
                    let dataSource = [..._this.dataSource];
                    console.log(_this.dataSource.length);
                    if (dataSource.length - 1 > 9) {
                        //大于规定行数(删除)
                        _this.dataSource = dataSource.filter((item, index) => index !== numberId);
                    } else {
                        //小于规定行数(清空)
                        for (let i = 0; i < dataSource.length; i++) {
                            if (i === numberId) {
                                for (const key in dataSource[i]) {
                                    if (key != 'number') {
                                        dataSource[i][key] = ""
                                    }
                                }
                            }
                        }
                        _this.dataSource = dataSource;
                    }
                    _this.reload();
                },
                onCancel () { },
            });
        },
        searchBackData (record) {
            if (record) {
                if (record.codesName == 'category') {
                    this.getCode();
                    if (this.voucherCode != 0) {
                        this.$set(this.dataJson, 'code', record.classWord + '字第' + this.voucherCode + '号');
                        this.dataJson.classWord = record.classWord;
                        this.dataJson.vclassName = record.name;
                        this.dataJson.vclassId = record.id;
                    }

                    if (record.name == '') {
                        this.dataJson.vclassName = null;
                        this.dataJson.vclassId = null;
                    }
                }
                if (record.codesName == 'employees') {
                    if (record.name) {
                        this.searchData.reviewerUserName = record.name;
                        this.searchData.reviewerUserId = record.id;
                    } else {
                        this.searchData.reviewerUserName = null;
                        this.searchData.reviewerUserId = null;
                    }
                }
            }
        },
        //获取可编辑的列名
        editColumnArray (column) {
            let editcloumn = [];
            column.forEach((item, index) => {
                editcloumn.push(item.dataIndex);
            });
            this.editColumnArraya = editcloumn;
        },
        searchGroup (type) {
            if (type == 'credentialsSearch') {
                this.$refs.credentialsSearch.showModal();
            } else if (type == 'employees') {
                this.$refs.reviewerRef.showModal();
            }
        },
        cancel () {
            this.auxiliaryModal = false;
        },
        handleSearch (n) {
            console.log(n);
            this.$refs[`${n}`].showModal();
        },
        setValue (data) {
            console.log(data);
            if (data.codesName == 'officeName') {//部门
                this.officeName = data.name;
                this.officeId = data.id;
            }

            if (data.codesName == 'crmName') { //客户
                this.crmName = data.crmName;
                this.crmId = data.id;
            }

            if (data.codesName == 'vendorName') { //供应商
                this.vendorName = data.name;
                this.vendorId = data.id;
            }

            if (data.codesName == 'settleName') { //结算方式
                this.settleName = data.name;
                this.settleId = data.id;
            }

            if (data.codesName == 'userName') { //个人
                this.userName = data.name;
                this.userId = data.id;
            }

            if (data.codesName == 'projectName') { //项目
                this.projectName = data.name;
                this.projectId = data.id;
            }
        },
        handlerSubmit () {
            //提交数据
            if (this.dataJson.code == null || this.dataJson.code == '') {
                this.$message.warning('凭证编号必须填写');
                return;
            }

            // if (this.dataJson.vclassId == null || this.dataJson.vclassId == '') {
            //     this.$message.warning('凭证类别必须填写');
            //     return;
            // }

            if (this.totalDebitAmount != this.totalCreditAmount) {
                this.$message.warning('借方金额和贷方金额必须相等');
                return;
            }

            if (this.totalDebitAmount == 0 || this.totalCreditAmount == 0) {
                this.$message.warning('不允许存在借方金额和贷方金额都未录入或录入金额为0的分录行！');
                return;
            }

            this.dataJson.accountingVoucherDetails = this.dataSource.filter(e => { return e.accountingId });//表明细
            if (this.dataJson.accountingVoucherDetails.length < 1) {
                this.$message.warning('请输入明细表');
                return;
            }

            //判断辅助项
            let vdetails = this.dataJson.accountingVoucherDetails;

            for (let i = 0; i < vdetails.length; i++) {
                let item = vdetails[i];
                if (item.officeId == 0 || item.projectId == 0 || item.settleId == 0 || item.vendorId == 0 || item.userId == 0 || item.crmId == 0) {
                    if (item.auxiliaryItem == '' || !item.auxiliaryItem || item.auxiliaryItem == null) {
                        this.$message.warning(`第${i + 1}行: 辅助项必须填写完整!`);
                        return;
                    }
                }
                if ((!item.debitAmount || item.debitAmount == 0) && (!item.creditAmount || item.creditAmount == 0)) {
                    this.$message.warning(`第${i + 1}行: 请输入借贷金额!`);
                    return;
                }
            }
            let requestData = JSON.parse(JSON.stringify(this.dataJson));
            requestData.code = this.dataJson.code.split('第')[0] + '第';

            if (this.currentId) {
                requestData.id = this.currentId;
            }

            console.log('提交的数据：', requestData);
            save(requestData).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                    this.editMask = true;
                    this.currentId = res.data;//当前凭证id
                    this.voucherState = 0;
                    this.invalidState = 0;

                    this.getDataList();
                    this.getDataNewPage(5);
                } else {
                    // this.$message.warning(res.message);
                }
            }).catch(error => {

            })
        },
        getDataList (t) {
            //获取列表
            let data = {
                current: this.pagination.current,
                size: this.pagination.pageSize,
            };
            if (t == 'search') {
                this.pagination.current = 1;
                data = Object.assign(data, this.searchData);
            }
            getList(data).then(res => {
                if (res.code === 200) {
                    let { total, current, size } = res.data;
                    this.pagination.total = res.data.total;
                    let records = res.data.records.map(v => {
                        return { ...v, key: v.id }
                    })
                    this.listDataSource = records;
                    console.log(this.listDataSource);
                    this.$forceUpdate();
                    if (records.length == 0) {
                        this.newPage();
                    }
                }
            })
        },
        getDataNewPage (type) {
            //翻页||获取最新一条||获取当前页type==5
            let requestData = {
                actionType: type,
                currentId: this.currentId,
            }
            getPage(requestData).then(res => {
                if (res.code === 200) {
                    if (type == 1 && res.data == null) {
                        this.$message.warning('已经是首页了');
                        return;
                    }
                    if (type == 2 && res.data == null) {
                        this.$message.warning('已经是尾页了');
                        return;
                    }
                    if (res.data) {
                        this.editMask = true;
                        this.currentId = res.data.id;
                        this.voucherState = res.data.status;
                        this.invalidState = res.data.isDelete;
                        this.dataJson = res.data;
                        this.dataSource = res.data.accountingVoucherDetails;
                        let length = res.data.accountingVoucherDetails.length;
                        if (length < 10) {
                            for (let i = 0; i < 10 - length; i++) {
                                let array = {};
                                this.dataSource.push(array)
                            }
                        }
                        this.reload();
                    }
                } else {
                    // this.$message.warning(res.message);
                }
            }).catch(res => {

            })
        },
        handleRemove (type) {
            //type == 0 取消作废
            //type == 1 作废
            let that = this;
            this.$confirm({
                title: type == 1 ? `是否确认作废该数据？` : `是否确认恢复该数据？`,
                content: "",
                onOk () {
                    remove({ id: that.currentId, status: type }).then(res => {
                        if (res.code == 200) {
                            if (type == 1) {
                                that.$message.success("作废成功");
                                that.invalidState = 1;
                            } else {
                                that.$message.success("恢复成功");
                                that.invalidState = 0;
                            }
                            that.getDataList();
                            that.getDataNewPage(5);
                        } else {
                            that.$message.warning(res.message);
                        }
                    })
                },
                onCancel () { }
            });
        },
        //审核
        auditClick (type) {
            if (this.selectedKeys.length < 1) {
                this.$message.warning('请至少勾选一条数据');
                return;
            }
            let requestData = {
                ids: this.selectedKeys,
                status: type
            }
            examine(requestData).then((response) => {
                if (response.code === 200) {

                    let that = this;
                    let success = `成功条数：${response.data.sCount}`;
                    let error = `失败条数：${response.data.fCount}`;
                    let msg = [];
                    for (let i = 0; i < response.data.result.length; i++) {
                        msg.push(<div>{response.data.result[i]}</div>);
                    }
                    let content = <div>
                        <span style="font-size:16px;color:green">{success}</span><br />
                        <span style="font-size:16px;color:red">{error}</span><br />
                        <div style="max-height:180px;overflow-y:auto;">{msg}</div>
                    </div>;
                    this.$confirm({
                        icon: () => { return <a-icon type="exclamation-circle" /> },
                        title: '操作结果',
                        content: content,
                        okText: '确定',
                        cancelText: '关闭',
                        onOk () {
                            that.getDataList();
                            that.getDataNewPage(5);
                        },
                        onCancel () {
                            that.getDataList();
                            that.getDataNewPage(5);
                        },
                    });

                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        //修改
        handleEdit () {
            this.editMask = false;
        },
        //改变分页大小
        changePageSize (e) {
            const value = e.target.value;
            let size = Number.parseInt(value);
            if (!size) {
                size = 20;
            }
            if (size > 500) {
                size = 500;
            }
            const { pagination } = this;

            Object.assign(this.pagination, {
                current: 1,
                pageSize: size,
            });
            this.getDataList();
        },
        syncFun () {
            //刷新
            this.getDataList();
            this.getDataNewPage(5);
        },
        onSelectChange (keys, rows) {
            //勾选数据
            this.selectedKeys = keys;
            this.selectedRows = rows;
        }
    },

};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .credentials-wrapper {
        padding: 10px;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        min-height: 350px;
        .date-tp {
            text-align: center;
            margin-bottom: 10px;
        }
        .footer-tp {
            text-align: center;
            margin-top: 10px;
        }

        .text-name {
            // border-bottom: 2px solid rgba(0, 0, 0, 0.8);
            padding-bottom: 5px;
        }
        .subsidiary {
            border: 1px solid #cacaca;
            text-align: center;
            display: flex;
            .sub-title {
                flex: 0 0 26px;
                padding-top: 8px;
                border-right: 1px solid #cacaca;
            }
            .sub-content {
                flex: 1;
                text-align: left;
                .sub-list {
                    border-bottom: 1px solid #cacaca;
                    line-height: 32px;
                    .ant-col {
                        padding-left: 20px;
                    }
                }
                .sub-list:last-child {
                    border-bottom: none;
                }
            }
        }
        .total-box {
            border-left: 1px solid #cacaca;
            border-right: 1px solid #cacaca;
            border-bottom: 1px solid #cacaca;
            display: flex;
            line-height: 32px;
            text-align: center;
            font-size: 14px;
            .total-title {
                width: 71.6%;
                border-right: 1px solid #cacaca;
                box-sizing: content-box;
            }
            .total-borrow {
                width: 14.2%;
                border-right: 1px solid #cacaca;
            }
            .total-loan {
                width: 14.2%;
            }
        }
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
        .credentials-search-warpper {
            position: relative;
            .search-box {
                display: flex;
                width: calc(100% - 60px);
                flex-wrap: wrap;
                .ant-select-selection__rendered {
                    line-height: 32px !important;
                }
                .ant-select {
                    width: 100%;
                }
                .filter {
                    display: table;
                    width: 246px;
                    margin-bottom: 5px;
                    .filter-label {
                        display: table-cell;
                        font-weight: normal;
                        max-width: 160px;
                        line-height: 32px;
                        white-space: nowrap;
                        vertical-align: bottom;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .filter-control {
                        display: table-cell;
                        width: 100%;
                    }
                }
            }
        }
        .bills-box-header {
            display: flex;
            justify-content: space-around;
            .filter {
                display: table;
                width: 246px;
                margin-bottom: 5px;
                .filter-label {
                    display: table-cell;
                    font-weight: normal;
                    max-width: 160px;
                    line-height: 32px;
                    white-space: nowrap;
                    vertical-align: bottom;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .filter-control {
                    display: table-cell;
                    width: 100%;
                }
            }
        }
    }

    .atable-edit {
        .ant-table-tbody > tr > td {
            padding: 0px 2px !important;
        }
    }

    //辅助弹窗
    .auxiliary-wapper {
        color: #222;
        .condition {
            padding: 0 10px;
            margin-bottom: 10px;
            overflow-y: auto;
            .filter {
                display: table;
                margin-top: 10px;
                .filter-label {
                    display: table-cell;
                    font-weight: normal;
                    max-width: 160px;
                    white-space: nowrap;
                    vertical-align: bottom;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .filter-control {
                    display: table-cell;
                    width: 100%;
                }
                .ant-select-selection--single {
                    height: auto;
                }
                .ant-input-number {
                    width: auto;
                }
                .ant-input,
                .ant-input-number,
                .ant-select-selection {
                    border-radius: 0;
                    border: none;
                    border-bottom: 1px solid #ccc;
                }
                .ant-input-number,
                .ant-select-selection,
                .ant-calendar-picker,
                .ant-calendar-picker-input,
                .ant-input:focus {
                    box-shadow: none;
                }
                .ant-input-number-handler-wrap {
                    display: none;
                }
            }
        }
    }
    .money-table-title {
        .header-box {
            width: 100%;
            display: flex;
            border-top: 1px solid #cacaca;
            .header-item {
                flex: 1;
                min-width: 20px;
                border-right: 1px solid #cacaca;
            }
            .header-item:nth-child(2),
            .header-item:nth-child(5),
            .header-item:nth-child(8) {
                border-right: 1px solid #a3d9f8;
            }
            .header-item:nth-child(11) {
                border-right: 1px solid #eb9998;
            }
            .header-item:last-child {
                border-right: 0px solid #cacaca;
            }
        }
    }

    /deep/.ant-table-thead > tr > th .ant-table-header-column {
        display: block !important;
    }
</style>